<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id='connect'>连接</button>
    <button id='send' disabled='true'>发送</button><br/>
    <p>从服务器发送过来的数据如下:</p>
    <span id='recr'></span>
    <script>
        var connect=document.querySelector('#connect')
        var send=document.querySelector('#send')
        var recr=document.querySelector('#recr')
        let ws=null
        connect.onclick=()=>{
            ws=new WebSocket('ws://localhost:9998')
            ws.onopen=()=>{
                console.log('连接服务器成功了...');
                send.disabled=false
            }
            ws.onclose=()=>{
                console.log('连接服务器失败');
                send.disabled=true
            }
            ws.onmessage=msg=>{
                console.log('服务器向客户端发送数据过来啦');
                console.log(msg);
                recr.innerHTML=msg.data
            }
        }
        send.onclick=()=>{
            // 传递的数据类型是json
            ws.send(JSON.stringify({
                action:'changeTheme',
                socketType:'changeTheme',
                chartName:'',
                value:'chalk'
            }))
        }
    </script>
</body>
</html>